<template>
    <div class="quota-setting-main">
      <title-bar :bar-title="barTitle"></title-bar>

      <div class="quota-setting-body">
      <div class="circle-wrapper">
        <x-circle :percent="percent" :stroke-width="6" :trail-width="6" :stroke-color="strokeColor2" trail-color="#ececec">
        <span :style="{color: strokeColor2}" v-html="percentVal"></span>
        </x-circle>
      </div>

      <div class="sales-target-body">

        <div class="target-been-set" v-if="isSetTarget()" >
          <router-link class="content" to='/performance-setting'>
            <div class="target"><label>目标: </label><span>{{ target | moneyFormate }}</span></div>
            <div class="finished-target"><label>已完成：</label><span>{{ finishedTarget | moneyFormate }}</span></div>
          </router-link>
        </div>

        <div class="set-target" v-else>
          <router-link class="set-target-trig" to='/performance-setting'>设置业绩目标</router-link>
        </div>

      </div>
      </div>
    </div>
</template>


<script>
import TitleBar from './title-bar';
import { XCircle} from 'vux'

export default{
  props:{
    finishedTarget : {
      default:0,
    },
    target:{
      default:0
    }
  },

  data () {

    return {
      barTitle : "业绩目标 (本月)",
      percent: null,
      percentVal: '',
      strokeColor2: '#EA578E',
    }

  },

  methods: {

    isSetTarget: function () {
       return typeof this.target === 'number';
    },

    setPercentage () {
      if(this.isSetTarget()) {
       this.percent = Math.round(this.finishedTarget/this.target*100);
      }

      console.log(this.finishedTarget, 'this.finishedTarget this.target', this.target);

      if(this.percent> 0 || this.finishedTarget == 0  && this.target ) {
      this.percentVal = this.percent+'%';
      } else {
      this.percentVal = '--</br>%';
      }
    }

  },

  watch:{
    target () {
      this.setPercentage();
    },

    finishedTarget () {
      this.setPercentage();
    }
  },

  mounted () {

    this.setPercentage();

  },

  components: {
     XCircle,
     TitleBar
  }
}
</script>


<style lang="less">

  @import "../less/base";

  .quota-setting-body {

    &:extend(.clearfix all);

    padding: 20px 0;
    padding-left: 30px;
    border-bottom: 1px solid #EDEDED;

    @itemSize : 75px;

    .circle-wrapper {

      float: left;
      width:@itemSize;
      height:@itemSize;
      line-height: 12px;
    }



    .target-been-set{
      height: @itemSize;
      display: table;

      .content{
        display: table-cell;
        vertical-align: middle;
        padding-left: 20px;
        font-size: 12px;
        color:#333;


        label{
          display: inline-block;
          width: 50px;
        }

        .finished-target {
          span {
          color:#EA578E;
          }
        }
      }
    }

    .sales-target-body {

      float: left;
      display: inline-block;
      vertical-align: middle;

      .set-target{
        font-size: 14px;
        font-weight: normal;
        color:#23B2E2;
        height:@itemSize;
        line-height: @itemSize;

        .set-target-trig{
        display:inline-block;
        margin-left: 20px;
        color: #23B2E2;
        }
      }
    }

    .content{
      display: block;
    }
  }

</style>
